<template>
	<!-- 首页房屋列表组件 -->
	<view class="homelist-item">
	<image class="item-image" :src="itemdata.images[0]" mode=""></image>
	   <view class="item-textcontent">
		<view class="title">{{selecthouse==0?itemdata.name:itemdata.title}}</view>
		<view class="homeinfo">
			<text v-if="selecthouse==0">{{use[itemdata.use-1]}} | {{furnish[itemdata.furnish-1]}} | 建面{{itemdata.minArea}}-{{itemdata.maxArea}}m²</text>
			<text v-else="selecthouse==1">{{type[itemdata.type-1]}} | {{itemdata.area}}m² | {{use[itemdata.use-1]}} </text>
		</view>
		<view class="lable-content">
			<view class="item-lable"  v-for="item2 in itemdata.tags" :key="item2">
				{{item2}}
			</view>
		</view>
		<view class="pricecontent">
			<view v-if="selecthouse==0" class="xinfang">
				<!-- 新房 -->
				{{itemdata.price}}元/m²
			</view>
			<view v-if="selecthouse==1" class="ershoufang">
				<!-- 二手房 -->
				<text>{{itemdata.price}}万</text>
				<text class="squareprice">{{Math.floor((itemdata.price/itemdata.area)*10000)}}元/平</text>
			</view>
			<view v-if="selecthouse==2" class="zufang">
				<!-- 租房 -->
				{{itemdata.price}}元/月
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"home-houselist",
		props:{
			// 选择类型 0 新房；1 二手房；2 租房
			selecthouse:{
				type:Number,
				default:0,
			},
			// 房屋信息
			itemdata:{
				type:Object,
			}
		},
		onLoad(){
			console.log(this.selecthouse,this.itemdata)
		},
		data() {
			return {
				use:["住宅","公寓"],
				furnish:["清水","精装"],
				type:["一室一厅","两室一厅","三室一厅","四室两厅","五室两厅"]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.homelist-item{
		width: 100%;
		overflow: hidden;
		box-shadow: 0 0 2px 2px  #d6d7d5;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		.item-image{
			width: 100%;
			height: 335rpx;
		}
		.item-textcontent{
			padding: 25rpx 0 15rpx 10rpx;
		}
		.title{
			font-size: 35rpx;
			color: #000;
			font-weight: 400;
			padding: 0 0 10rpx 0;
		}
		.homeinfo{
			font-size: 25rpx;
			color: #000;
			display: flex;
		}
		.lable-content
		{
			display: flex;
			color: #fff;
			margin-top: 10rpx;
			font-size: 25rpx;
			.item-lable{
				margin-left:5rpx ;
				padding: 5rpx;
				background: #d3d3d3;
			}
		}
		.pricecontent{
			margin-top: 20rpx;
			color: #d95a5a;
			font-size: 40rpx;
			.squareprice{
				color: #a3a4a5;
				margin-left: 20rpx;
				font-size: 25rpx;
			}
		}
	}
</style>